<template>
    <div id="printCallRecords" ref="callBosMain">
        <div class="title">
            <span class="line"></span>
            <span><i style="font-size:15px !important;" class="iconfont icon-tonghuajilu"></i> VPN:
                {{ sendData.label }}</span>
            <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="openPrintModel"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
        </div>
        <el-card>
            <el-tabs v-model="activeName" :tab-position="top" :stretch="true">
                <el-tab-pane label="VPN信息" name="first">
                    <el-descriptions v-if="sendData.url !== ''" title="" direction="vertical" :column="1" border>
                        <el-descriptions-item label="VPN名称">
                            {{ sendData.label }}
                        </el-descriptions-item>
                        <el-descriptions-item label="URL">{{ sendData.url }}</el-descriptions-item>
                    </el-descriptions>
                    <div v-else style="height: 74vh;"><el-empty description="暂无数据(VPN信息)"></el-empty></div>
                </el-tab-pane>
                <el-tab-pane v-if="tableData" label="详情" name="second">
                    <div v-if="tableData.length" class="detail">
                        <el-card v-for="(item, index) in tableData" :key="index" style="margin-bottom: 10px;">
                            <el-form label-position="left" label-width="80px" size="mini" >
                                <el-form-item label="VPN名称" style="height: 10px;">
                                    {{ item.appname }}
                                </el-form-item>
                                <el-form-item label="组名称" style="height: 10px;">
                                    {{ item.groupName }}
                                </el-form-item>
                                <el-form-item label="配置名称" style="height: 10px;">
                                    {{ item.profileName }}
                                </el-form-item>
                                <el-form-item label="可选地址" style="height: 10px;">
                                    {{ item.selection }}
                                </el-form-item>
                            </el-form>
                            <!-- <div>
                                VPN名称:{{ item.appname }}
                            </div>
                            <div>
                                组名称:{{ item.groupName }}
                            </div>
                            <div>
                                配置名称:{{ item.profileName }}
                            </div>
                            <div>
                                可选地址:{{ item.selection }}
                            </div> -->
                        </el-card>
                    </div>
                    <div v-else style="height: 74vh;"><el-empty description="暂无数据(详情)"></el-empty></div>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="offset" :page-sizes="[100, 200, 300, 400]" :page-size="10"
                            layout="total, prev, pager, next, jumper" :total="total" hide-on-single-page>
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="Node节点" name="third">
                    <div v-if="nodeDataList.length" class="node" style="overflow-y: auto;height: 78vh;">
                        <el-card v-for="(item, index) in nodeDataList" style="margin-bottom: 10px;">
                            <div style="padding: 0 10px;">
                                <div>
                                    app名称：{{ item.appname ? item.appname : '暂无' }}
                                </div>
                                <div>
                                    名称：{{ item.name ? item.name : '暂无' }}
                                </div>
                                <div>
                                    网络：{{ item.network ? item.network : '暂无' }}
                                </div>
                                <div>
                                    协议：{{ item.protocol ? item.protocol : '暂无' }}
                                </div>
                                <div>
                                    网络主机：{{ item.ws_host ? item.ws_host : '暂无' }}
                                </div>
                                <div>
                                    shadowsocks地址：{{ item.shadowsocks_address ? item.shadowsocks_address :
                                        '暂无' }}
                                </div>
                                <div>
                                    shadowsocks方法：{{ item.shadowsocks_method ? item.shadowsocks_method : '暂无'
                                    }}
                                </div>
                                <div>
                                    shadowsocks密码：{{ item.shadowsocks_password ? item.shadowsocks_password :
                                        '暂无' }}
                                </div>
                                <div>
                                    shadowsocks端口：{{ item.shadowsocks_port ? item.shadowsocks_port : '暂无' }}
                                </div>
                                <div>
                                    socks地址：{{ item.socks_address ? item.socks_address : '暂无' }}
                                </div>
                                <div>
                                    socks密码：{{ item.socks_password ? item.socks_password : '暂无' }}
                                </div>
                                <div>
                                    socks端口：{{ item.socks_port ? item.socks_port : '暂无' }}
                                </div>
                                <div>
                                    socks用户：{{ item.socks_user ? item.socks_user : '暂无' }}
                                </div>
                                <div>
                                    url：{{ item.url ? item.url : '暂无' }}
                                </div>
                                <div>
                                    socks地址：{{ item.vmess_address ? item.vmess_address : '暂无' }}
                                </div>
                                <div>
                                    vmess_alterid：{{ item.vmess_alterid ? item.vmess_alterid : '暂无' }}
                                </div>
                                <div>
                                    vmess端口：{{ item.vmess_port ? item.vmess_port : '暂无' }}
                                </div>
                                <div>
                                    vmess_security：{{ item.vmess_security ? item.vmess_security : '暂无' }}
                                </div>
                                <div>
                                    vmess_uuid：{{ item.vmess_uuid ? item.vmess_uuid : '暂无' }}
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-else style="height: 74vh;"><el-empty description="暂无数据(Node节点)"></el-empty></div>
                </el-tab-pane>
            </el-tabs>
        </el-card>

    </div>
</template>
  
<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getCallRecordsApi, searchWord } from '@/api/baseInfo/base_api'
import { parseTime } from "@/utils/index"
import { sendMarkOrderApi, getUserCallRe } from '@/api/markApi/index'
import { throttle } from 'lodash';

import ScreenShort from "js-web-screen-shot";
import { detalisVpnApi, vpnNodeApi } from "@/api/vpn/index"

export default {
    name: "vpn",
    props: ['sendData'],
    data() {
        return {
            activeName: 'first',
            closeLoadingData: false,
            offset: 1,
            limit: 10,
            nodeoffset: 1,
            nodelimit: 10,
            show: true,
            showNode: true,
            tableData: [],
            nodeDataList: [],
            total: 0,
            nodeTotal: 0
        };
    },
    watch: {
        "$store.state.account.vpn": function () {
            this.activeName = 'first';
            this.tableData = [];
            this.nodeDataList = [];
            this.offset = 1;
            this.limit = 20;
            this.total = 0;
            this.nodeTotal = 0;
            this.initVpnDetails();
            this.initVpnNode();
        },
    },
    created() {
        this.initVpnDetails();
        this.initVpnNode();
    },
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.nodeoffset = val;
            this.initVpnDetails();
        },
        nodehandleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        nodehandleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.offset = val;
            this.initVpnNode();
        },
        initVpnDetails() {
            let data = {
                proof_num: sessionStorage.getItem('proof_num'),
                apptype: this.sendData.class,
                account_id: String(this.sendData.account_id),
                APP_NAME: this.sendData.class,
                profileName: this.sendData.label,
                offset: this.offset,
                limit: this.limit
            }
            detalisVpnApi(data).then(res => {
                console.log(res)
                this.tableData = res.data;
                if (res.data.length > 0) {
                    this.total = res.data[0].cnt
                }

            })
        },
        initVpnNode() {
            let data = {
                proof_num: sessionStorage.getItem('proof_num'),
                APP_NAME: this.sendData.class,
                account_id: String(this.sendData.account_id)
            }
            vpnNodeApi(data).then(res => {
                this.nodeDataList = res.data;
                if (res.data.length > 0) {
                    this.nodeTotal = res.data[0].cnt
                }
            })
        }
    }
};
</script>
  
<style scoped>
.detail,
.node {
    overflow-y: auto;
    height: 78vh;
}

@media screen and (min-width: 2360px) {

    .detail,
    .node {
        max-height: 72vh;

    }
}

@media screen and (min-width: 2561px) {

    .detail,
    .node {
        max-height: 56vh;

    }
}

.loadingBoxbottom {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.callInfoB {
    height: 40px;
    width: 90%;
    border-bottom: 1px solid #f1f1f1;
    line-height: 40px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.blackCall {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    margin-bottom: 10px;
}

.callRecordListItem {
    height: 60px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 17px 119px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    background: #fff;
}

/* .callRecordListItem:hover{
    background: #ececec;
  } */
.badgeBox {
    width: 50px;
    height: 23px;
    border-radius: 10px;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
}

.title {
    width: 100%;
    height: 50px;
    background: #2b2f3a;
    margin-bottom: 10px;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
}

.line {
    width: 8px;
    height: 100%;
}

.mainContentBox {
    padding: 0 10px;
    height: 90%;
    overflow-y: auto;
    padding-bottom: 100px;
}

.mainContentBox::-webkit-scrollbar {
    width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.mainContentBox::-webkit-scrollbar-track {
    background-color: rgb(252, 252, 252);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/* <!--修改 滑块 --> */
.mainContentBox::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
</style>
  